<template>
  <div>
    <div class="classify" v-if="isload">
    <div class="classify-header">
      <div class="header-left">
        <i class="iconfont icon-fanhui" v-on:click="goback"></i>
        <div class="header-text">菜谱分类</div>
      </div>
      <div class="header-right">
        <router-link to="/food-search">
        <i class="iconfont icon-sousuo"></i>
        </router-link>
      </div>
    </div>
    <div class="classify-main">
      <aside>
        <ul>
          <li
            v-for="item in classify_list"
            v-bind:key="item.id"
            v-on:click="getid(item.id)"
            v-bind:class="{cactive:id == item.id}">
            {{ item.name }}
          </li>
        </ul>
      </aside>
      <div class="classify-content">
        <classify-camp v-bind:cid="id"></classify-camp>
      </div>
    </div>
  </div>
  <div v-else>
    <jia-zai></jia-zai>
  </div>
  </div>
</template>

<script>
import classifyCamp from "@/components/classify-camp.vue"
import jiaZai from '@/components/jiazai.vue'
export default {
  components: {
    classifyCamp,
    jiaZai
  },
  data() {
    return {
      classify_list: [],
      id: 1,
      isload:false
    };
  },
  methods: {
    getclassify() {
      let datas = JSON.parse(localStorage.getItem("fenlei_list"));
      if (datas) {
        this.classify_list = datas;
        this.isload = true;
      } else {
        let _this = this;
        let url = `https://apis.netstart.cn/douguo/recipe/flatcatalogs`;
        let promise = axios.get(url);
        promise.then((res) => {
          console.log(res.data.result.cs);

          localStorage.setItem(
            "fenlei_list",
            JSON.stringify(res.data.result.cs)
          );
          _this.classify_list = res.data.result.cs;
        });
        _this.isload = true;
      }
    },
    goback() {
      //   this.$router.go(-1);
      this.$router.back(-1);
    },
    getid(i) {
      this.id = parseInt(i);
      console.log(this.id);
    },
  },
  created() {
    this.getclassify();
  },
};
</script>

<style lang="scss">
@import url("../assets/css/style.css");
.classify {
  width: 100%;
  .classify-header {
    height: 50px;
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    background-color: white;
    display: flex;
    position: fixed;
    top: 0;
    justify-content: space-between;
    .header-left {
      width: 60%;
      height: 30px;
      // background-color: #fff;
      display: flex;
      justify-content: start;
      font-size: 0;
      i {
        display: block;
        width: 30px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        color: black;
      }
      .header-text {
        height: 30px;
        font-size: 20px;
        font-weight: 500;
        line-height: 30px;
        margin-left: 10px;
      }
    }
    .header-right {
      width: 40%;
      height: 30px;
      // background-color: pink;
      text-align: right;
      font-size: 0;
      a{
        width: 100%;
        height: 30px;
        i {
        height: 30px;
        width: 30px;
        font-size: 30px;
        line-height: 30px;
      }
      }
    }
  }

  .classify-main {
    margin-top: 50px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    aside {
      
      width: 25%;
      
      ul {
        width: 100%;
        li {
          height: 50px;
          display: block;
          font-size: 16px;
          line-height: 50px;
          text-align: center;
          box-sizing: border-box;
        }
      }
    }
    .classify-content {
      width: 75%;
    }
    .cactive{
      background-color: whitesmoke;
      border-right: 3px solid yellow;
      
    }
  }
}
</style>